<template>
    <view>
        <view class="m-list-team flex-c-s">
            <view @click="$u.route('/pages/index/details', { id: item.id })" class="v1 flex-c-c" :style="{ backgroundColor: getColor() }">{{ item.name.slice(0, 1) }}</view>
            <view @click="$u.route('/pages/index/details', { id: item.id })" class="" style="flex: 1; margin-left: 20rpx">
                <view class="" style="font-weight: 600; font-size: 28rpx; margin-bottom: 12rpx">
                    {{ item.name }}
                </view>
                <view class="" style="font-size: 24rpx">剩余次数/{{ item.balance||0 }} </view>
            </view>
            <view class="flex-c">
                <u-button style="margin-right: 20rpx" type="success" size="mini" text="充值" @click="$u.route('/pages/mine/go-tixian', { id: item.id })"></u-button>
                <u-button type="warning" size="mini" text="签到" @click="$u.route('/pages/mine/sign-in', { id: item.id })"></u-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
// const emits = defineEmits(['edit'])
const props = defineProps({
    index: Number,
    item: {
        type: Object,
        default() {
            return {};
        }
    }
});
const getColor = () => {
    let color_arr = ['primary', 'error', 'success', 'warning'];
    // Math.floor(Math.random() * 4)
    return uni.$u.color[color_arr[props.index % 4]];
};
const emits = defineEmits(['reset']);
const completed_show = ref(false);
const form_data = reactive({
    phop_list: []
});
</script>

<style scoped lang="scss">
.m-list-team {
    overflow: hidden;
    width: 710rpx;
    margin: 0 auto;
    padding: 50rpx 24rpx 28rpx;
    position: relative;
    border-bottom: 2px solid rgb(230, 232, 235);
    .v1 {
        width: 80rpx;
        height: 80rpx;
        background-color: pink;
        font-size: 50rpx;
        font-weight: bold;
        color: white;
        border-radius: 12rpx;
    }
}
</style>
